<template>
  <view class="category-page">
    <view class="page-header">
      <text class="page-title">壁纸分类</text>
    </view>
    
    <view class="category-container">
      <view 
        v-for="category in categories" 
        :key="category._id"
        class="category-card"
        @click="navigateToCategoryList(category._id, category.name)"
      >
        <view class="category-icon">
          <view 
            class="category-emoji" 
            :style="{ fontSize: '48px', color: category.color || '#007aff' }"
          >{{`${category.icon}`}}️</view>
        </view>
        <view class="category-info">
          <text class="category-name">{{ category.name }}</text>
          <text class="category-count">{{category.wallpaperCount || 0 }} 张壁纸</text>
        </view>
        <view class="icon icon-right" style="font-size: 20px; color: #999;">›</view>
      </view>
    </view>
	<!-- 加载状态 -->
	<view v-if="isLoading" class="loading-state">
	  <uni-load-more :status="'loading'" />  
	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad} from "@dcloudio/uni-app"

const isLoading = ref(false);
const categories = ref([
  { _id: 'nature', name: '自然', icon: '', color: '#52c41a', count: 256 },
  { _id: 'anime', name: '动漫', icon: ' ', color: '#faad14', count: 384 },
  { _id: 'art', name: '艺术', icon: ' ', color: '#f5222d', count: 192 },
  { _id: 'text', name: '文字', icon: ' ', color: '#1890ff', count: 128 },
  { _id: 'car', name: '汽车', icon: ' ', color: '#722ed1', count: 96 },
  { _id: 'landscape', name: '风景', icon: ' ', color: '#13c2c2', count: 224 },
  { _id: 'abstract', name: '抽象', icon: ' ', color: '#eb2f96', count: 160 },
  { _id: 'other', name: '其他', icon: ' ', color: '#8c8c8c', count: 88 }
]);

// 加载分类数据 管理员页面的分类数据建议后期修改
const getCategories = async () => {
  isLoading.value = true;
  
  try {
    const res = await uniCloud.callFunction({
      name: 'admingetCategories'
    });
    
    if (res && res.result && res.result.code === 0) {
      categories.value = res.result.data || [];
    }
  } catch (error) {
    console.error('加载分类失败:', error);
    // 使用模拟数据
    // mockCategories();
  } finally {
    isLoading.value = false;
  }
};
onLoad(async () => {
  try {
    // 实际应调用云函数获取分类列表
    // const res = await uniCloud.callFunction({ name: 'category/getList' });
    // if (res.result.code === 0) {
    //   categories.value = res.result.data;
    // }
	getCategories()
  } catch (error) {
    console.error('获取分类失败:', error);
    uni.showToast({ title: '加载失败', icon: 'none' });
  }
});

const navigateToCategoryList = (categoryId, categoryName) => {
  uni.navigateTo({
    url: `/pages/category/list?category_id=${categoryId}&category_name=${encodeURIComponent(categoryName)}`
  });
};
</script>

<style scoped lang="less">
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.category-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .page-header {
    background-color: #fff;
    padding: 16px;
    margin-bottom: 12px;
    .page-title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }
  }
  
  .category-container {
    padding: 0 16px 20px;
    
    .category-card {
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 16px;
      border-radius: 12px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .category-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
      }
      
      .category-info {
        flex: 1;
        
        .category-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          display: block;
          margin-bottom: 4px;
        }
        
        .category-count {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}
</style>